import React from 'react';
import { observer, inject } from 'mobx-react';
import * as mobx from 'mobx';
import { withRouter } from 'react-router-dom';
import { Flex,Icon } from 'weaver-mobile';
import CellType from '../layout/CellType';
import { _, ParseUtil, DetailUtil, FieldUtil } from '../../util/pcPublic';
import * as Common from '../../util/common';
const getLabel = Common.getLabel;

@inject('wfEditRowStore', 'wfLayoutStore','wfGlobalStore')
@withRouter
@observer
export default class Main extends React.Component{
    constructor(props){
        super(props);
    }
    componentWillMount(){
        const { wfEditRowStore,location } = this.props;
        const queryParams = location && location.state;
        wfEditRowStore.doInitInfo(queryParams);
    }
    componentWillUnmount(){
        const { wfEditRowStore } = this.props;
        this.forceRenderField()
        wfEditRowStore.resetState();
    }
    render(){
        const { wfEditRowStore,wfLayoutStore } = this.props;
        const { detailMark,rowIndex,fieldArr,variableMap } = wfEditRowStore;
        const { serialNum,preRowIndex,nextRowIndex,disabledDelBtn,disabledAddBtn,showCopyBtn } = mobx.toJS(variableMap);
        const { dataJson,detailMap } = wfLayoutStore;
        const detailLayout = dataJson.etables[detailMark] || {};
        const { colattrs } = detailLayout;
        const detailObj = detailMap.has(detailMark) ? detailMap.get(detailMark) : {};
        const { fieldInfo,rowInfo } = detailObj;
        if(!rowInfo.has(`row_${rowIndex}`))     //删除时避免渲染字段导致报错
            return <div></div>
        return (
            <div className="wf-editrow">
                <Flex className="wf-editrow-bar" justify="end">
                    <Flex.Item>
                        <div className={`wf-editrow-bar-pre ${preRowIndex<0?"wf-editrow-bar-disabled":""}`} onClick={this.clickOperBtn.bind(this,"pre")}>
                            <span>{getLabel(515115, "上一条")}</span>
                        </div>
                    </Flex.Item>
                    <Flex.Item>
                        <div className={`wf-editrow-bar-next ${nextRowIndex<0?"wf-editrow-bar-disabled":""}`} onClick={this.clickOperBtn.bind(this,"next")}>
                            <span>{getLabel(515116, "下一条")}</span>
                        </div>
                    </Flex.Item>
                </Flex>
                <div className="wf-editrow-content">
                    {
                        this.generateRow("serialnum", getLabel(15486,"序号"), serialNum)
                    }
                    {
                        !_.isEmpty(fieldInfo) && fieldArr && fieldArr.map(cellObj =>{
                            const colid = cellObj.id.split(",")[1];
                            const fieldid = cellObj.field.toString();
                            const fieldAttr = fieldInfo[fieldid];

                            const colCusAttr = colattrs ? colattrs["col_"+colid] : null;
                            const tdCellAttr = ParseUtil.getCellAttr(cellObj, colCusAttr, 30, true);
                            const rowClass = tdCellAttr.tdClass;
                            const cellAttr = ParseUtil.buildCellAttr(tdCellAttr, tdCellAttr.cusclass, tdCellAttr.divStyle);
                            const fieldlabel = fieldAttr && fieldAttr.fieldlabel || "";
                            const FieldContent = (
                                <CellType
                                    symbol={detailMark}
                                    cellAttr={cellAttr}
                                    cellObj={cellObj}
                                    detailProps={{rowIndex}}
                                    isFromDetailEdit={true}
                                />
                            );
                            return this.generateRow(fieldid, fieldlabel, FieldContent, rowClass);
                        })
                    }
                </div>
                <div className="wf-editrow-bottom-splitline"></div>
                <Flex className="wf-editrow-btns" justify="end">
                    <Flex.Item>
                        <div className={`wf-editrow-btn-add ${disabledAddBtn?"wf-editrow-btn-disabled":""}`} onClick={this.clickOperBtn.bind(this,"add")}>
                            <Icon type="tianjia" />
                        </div>
                    </Flex.Item>
                    <Flex.Item>
                        <div className={`wf-editrow-btn-del ${disabledDelBtn?"wf-editrow-btn-disabled":""}`} onClick={this.clickOperBtn.bind(this,"del")}>
                            <Icon type="shanchu" />
                        </div>
                    </Flex.Item>
                    {
                        showCopyBtn && <Flex.Item>
                            <div className={`wf-editrow-btn-copy`} onClick={this.clickOperBtn.bind(this,"copy")}>
                                <Icon type="replication" />
                            </div>
                        </Flex.Item>
                    }
                    <Flex.Item>
                        <div className="wf-editrow-btn-confirm" onClick={this.clickOperBtn.bind(this,"confirm")}>
                            <Icon type="check-circle-o" />
                        </div>
                    </Flex.Item>
                </Flex>
            </div>
        )
    }
    generateRow(key, label, contentObj, rowClass){
        return (
            <div key={key} id={`row_${key}`} className={rowClass}>
                <Flex className="wf-editrow-field" justify="end">
                    <Flex.Item style={{flex:4}}>
                        <div className="wf-editrow-field-label" dangerouslySetInnerHTML={{__html:label}}></div>
                    </Flex.Item>
                    <Flex.Item style={{flex:6}}>{contentObj}</Flex.Item>
                </Flex>
                <div className="wf-editrow-field-splitline"></div>
            </div>
        )
    }
    clickOperBtn(target){
        const { wfEditRowStore,wfLayoutStore,history } = this.props;
        const { detailMark,rowIndex,variableMap } = wfEditRowStore;
        const { preRowIndex,nextRowIndex,disabledDelBtn,disabledAddBtn } = mobx.toJS(variableMap);
        const { detailMap } = wfLayoutStore;
        const detailObj = detailMap.has(detailMark) ? detailMap.get(detailMark) : {};
        if(target === "pre" && preRowIndex >= 0){
            this.forceRenderField()
            wfEditRowStore.reEditAssignRow(preRowIndex);
        }else if(target === "next" && nextRowIndex >= 0){
            this.forceRenderField()
            wfEditRowStore.reEditAssignRow(nextRowIndex);
        }else if(target === "del" && !disabledDelBtn){
            Common.showConfirm({
                title: getLabel(15097, '确定要删除吗？'),
                okEvent: () => {
                    history.go(-1);
                    DetailUtil.delAssignRow(detailMark, [rowIndex], false);
                }
            });
        }else if(target === "add" && !disabledAddBtn){
            const addRowIndex = DetailUtil.addRow(detailMark);
            if(!!addRowIndex || addRowIndex === 0)
                wfEditRowStore.reEditAssignRow(addRowIndex);
        }else if(target === "copy" && !disabledAddBtn){
            DetailUtil.copyRow(detailMark, [rowIndex]);
            const lastRowIndex = detailObj.indexnum - 1;
            wfEditRowStore.reEditAssignRow(lastRowIndex);
        }else if(target === "confirm"){
            history.go(-1);
        }
    }

     forceRenderField=()=>{
         const {fieldArr,rowIndex, detailMark}=this.props.wfEditRowStore;
         const { changeSingleFieldValue, fieldAttrMap , detailMap} = this.props.wfLayoutStore;
         fieldArr.map(item=>{
             const{field}=item;
             const fieldAttr = fieldAttrMap.get(field) || {};
             let htmltype = fieldAttr.htmltype || 0;
             if(htmltype === 6 ){
                let fieldObj = FieldUtil.getDetailFieldObj("field"+field+"_"+rowIndex, detailMark, detailMap)
                const{fieldStoreEdit,fieldStore}=fieldObj;
                if(fieldStoreEdit){
                    const {datas}=fieldStoreEdit;
                    let _datas=[...datas];
                    _datas.map(item=>{
                       delete item.buttonGroup;
                    })
                    fieldStore.setState({datas:_datas})
                    fieldStore.list&&fieldStore.list.setState({data:_datas})
                }
             }
         })
     }
}